<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map映射的使用</title>
</head>
<body>
    
</body>
<script>
    /*
        map映射  我们可以简单的理解成是去了一趟打印店  将你的数组打印一份  
            但是打印的过程中 还能按照我们自己的想法修改数组的内容 
                map的回调函数的返回值就是新数组中的值   返回什么  新数组就会存放什么  这个和fliter过滤是不一样的
                    filter过滤是只有在返回True的时候 才会将item值传递给新数组
        
        和前面的一样  值类型和引用类型的map方法会有一点点区别
            值类型  新数组不会影响老数组
            引用类型  ：  因为存放的地址  所以修改了以后原数组也会跟着修改
    */

    // 值类型
    let arr = ['jimmy','xuexue']
    let newarr = arr.map((item,index,arr)=>{
        return `stadio ${item}`  
    })

    /*
        当数组存放的是值类型的时候   map对数组的处理是不会影响原数组的    
    */
    console.log(newarr)  //新数组  ["stadio jimmy", "stadio xuexue"]
    console.log(arr)  // 原数组  ["jimmy", "xuexue"]   

    // 引用类型
    let arrt = [
        {name:'Vue.js',price:200},
        {name:'Node.js',price:180},
        {name:'JS',price:150}
    ]

    /*
        当数组存放的是引用类型的数据的时候   map对数组的处理会影响到原数组  因为他们存放的时候同一个地址
    */
    let newarrs = arrt.map(item=>{
        item.click = 100
    })
    console.log(arrt)   //这个就是引用类型   存放地址值也会跟着改变
    /*
        0: {name: "Vue.js", price: 200, click: 100}
        1: {name: "Node.js", price: 180, click: 100}
        2: {name: "JS", price: 150, click: 100}
    */
</script>
</html>